<template>
  <div class="form-signin">
    <div class="alert alert-danger" role="alert" v-show="wrong">
      Wrong Password or Telephone
    </div>
    <form>
      <br>
      <br>
      <img class="mb-4" src="../assets/icon.svg" alt="" width="72" height="57">
      <h1 class="h3 mb-3 fw-normal">Sign in to Book Store</h1>

      <div class="form-floating">
        <input type="tel" class="form-control" id="floatingInput" placeholder="name@example.com" v-model="tel">
        <label for="floatingInput">Telephone</label>
      </div>
      <div class="form-floating">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password" v-model="pwd">
        <label for="floatingPassword">Password</label>
      </div>
      <br>
      <br>
      <button class="w-100 btn btn-lg btn-primary" @click="signIn" type="button">Sign in</button>
    </form>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {useRouter} from "vue-router";
import {reactive, ref} from 'vue';
import axios from "axios";

export default {
  name: "login",
  setup(){
    const store = useStore();
    const router = useRouter();
    store.dispatch("Load");

    let tel = ref("");
    let pwd = ref("");
    let wrong = ref(false);
    const sendRequest = ()=>{
      axios.get("LogInServlet?tel=" + tel.value + "&pwd=" + pwd.value,).then((res)=>{
        store.dispatch("Finished");
        if(res.data){
          store.dispatch("SignIn");
          router.push("/books");
        }
        else{
          wrong.value = true;
        }
      });
    }
    const signIn = ()=>{
      store.dispatch("Load")
      if(tel.value === "" || pwd.value === ""){
        store.dispatch("Finished");
        wrong.value = true;
      }
      else sendRequest()
    }
    store.dispatch("Finished");
    return{
      tel,
      pwd,
      signIn,
      wrong
    }
  }
}
</script>

<style scoped>

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin{
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="tel"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}



</style>